<template>
  <a-modal v-model:visible="visible" title="新增用户" :footer="false">
    <a-form :model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
      <div class="fromBox">
        <a-form-item label="用户名" name="name" :rules="[{ required: true, message: '请输入用户名' }]">
          <a-input v-model:value="formState.name" />
        </a-form-item>

        <a-form-item label="手机号" name="phone" :rules="[{ required: true, message: '请输入手机号' }]">
          <a-input v-model:value="formState.phone" />
        </a-form-item>

        <a-form-item label="用户账号" name="userCode" :rules="[{ required: true, message: '请输入用户账号' }]">
          <a-input v-model:value="formState.userCode" />
        </a-form-item>

        <a-form-item label="用户密码" name="userPassword" :rules="[{ required: true, message: '请输入用户密码' }]">
          <a-input-password v-model:value="formState.userPassword" />
        </a-form-item>

        <a-form-item label="身份证" name="idCard" :rules="[{ required: true, message: '请输入身份证' }]">
          <a-input v-model:value="formState.idCard" />
        </a-form-item>

        <a-form-item :label="v.label" :name="v.key" v-for="(v,i) in inputArr" :key="i">
          <a-input v-model:value="formState[v.key]" />
        </a-form-item>

        <a-form-item label="学位" name="degreeType">
          <a-select ref="select" v-model:value="formState.degreeType">
            <a-select-option value="jack">Jack</a-select-option>
            <a-select-option value="lucy">Lucy</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="职业病接害因素" name="diseaseFactorCode">
          <a-select ref="select" v-model:value="formState.diseaseFactorCode">
            <a-select-option value="jack">Jack</a-select-option>
            <a-select-option value="lucy">Lucy</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="学历" name="educationType">
          <a-select ref="select" v-model:value="formState.educationType">
            <a-select-option value="jack">Jack</a-select-option>
            <a-select-option value="lucy">Lucy</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="是否犯罪" name="isCrime">
          <a-select ref="select" v-model:value="formState.isCrime">
            <a-select-option value="1">是</a-select-option>
            <a-select-option value="0">否</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="是否职业卫生接害" name="isHealth">
          <a-select ref="select" v-model:value="formState.isHealth">
            <a-select-option value="1">是</a-select-option>
            <a-select-option value="0">否</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="是否关键岗位" name="isKeyPosition">
          <a-select ref="select" v-model:value="formState.isKeyPosition">
            <a-select-option value="1">是</a-select-option>
            <a-select-option value="0">否</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="人员类型" name="personType">
          <a-select ref="select" v-model:value="formState.personType">
            <a-select-option value="1">是</a-select-option>
            <a-select-option value="0">否</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="岗位(职务)" name="positionCode">
          <a-select ref="select" v-model:value="formState.positionCode">
            <a-select-option value="1">是</a-select-option>
            <a-select-option value="0">否</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="专业" name="professionalTitleCode">
          <a-select ref="select" v-model:value="formState.professionalTitleCode">
            <a-select-option value="1">是</a-select-option>
            <a-select-option value="0">否</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="毕业院校" name="schoolGuid">
          <a-select ref="select" v-model:value="formState.schoolGuid">
            <a-select-option value="1">是</a-select-option>
            <a-select-option value="0">否</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="学校岗位" name="schoolPositionCode">
          <a-select ref="select" v-model:value="formState.schoolPositionCode">
            <a-select-option value="1">是</a-select-option>
            <a-select-option value="0">否</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="性别" name="sex">
          <a-select ref="select" v-model:value="formState.sex">
            <a-select-option value="M">男</a-select-option>
            <a-select-option value="W">女</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="入职时间" name="entryTime">
          <a-date-picker v-model:value="formState.entryTime" :locale="locale" />
        </a-form-item>

        <a-form-item label="毕业时间" name="graduationTime">
          <a-date-picker v-model:value="formState.graduationTime" picker="month" :locale="locale" />
        </a-form-item>

      </div>
      <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
        <a-button type="primary" html-type="submit">创建</a-button>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, defineComponent, reactive, defineEmits } from 'vue'
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
dayjs.locale('zh-cn')
import userApi from '@/api/user'

const visible = ref(false)
const emit = defineEmits(['getList'])
interface FormState {
	name: string
	phone: string
	userCode: string
	userPassword: string
	address?: string
	degreeType?: string
	diseaseFactorCode?: string
	educationType?: string
	email?: string
	entryTime?: string
	graduationTime?: string
	groupGuid?: string
	idCard?: string
	isCrime?: string
	isHealth?: string
	isKeyPosition?: string
	originalPositionAge?: string
	originalPositionCode?: string
	personType?: string
	photoPath?: string
	politicsType?: string
	positionAge?: string
	positionCode?: string
	professionalTitleCode?: string
	schoolGuid?: string
	schoolPositionCode?: string
	sex?: string
}
let formState = reactive<FormState>({
	name: '',
	phone: '',
	userCode: '',
	userPassword: ''
})
let inputArr = ref([
	{
		key: 'address',
		label: '地址'
	},
	{
		key: 'age',
		label: '年龄'
	},
	{
		key: 'email',
		label: '邮箱'
	}
])
// 显示model框
const show = () => {
	visible['value'] = true
}
// 因此model框
const hide = () => {
	visible['value'] = false
	emit('getList')
}

const onFinish = (values: any) => {
	console.log('Success:', values)
	userApi.addUser(values).then(res => {
		console.log(res)
		if (res.code == 200) {
			hide()
		}
	})
}

const onFinishFailed = (errorInfo: any) => {
	console.log('Failed:', errorInfo)
}
defineExpose({
	show,
	hide,
	onFinish,
	onFinishFailed
})
</script>

<style lang="less" scoped>
.fromBox {
	max-height: 600px;
	padding-right: 10px;
	margin-bottom: 10px;
	overflow: auto;
}
</style>